<template>
  <div class="header">
    <header-com :backable="false" :showUser="true">
      <template v-slot:formName>
        表单名称
      </template>
    </header-com>
  </div>
  <section class="form">
    <form class="form-container">
      <div class="box-container">
        <div class="message">
          <div class="cover">
            <img style="width: 40px"
                 src=""
                 class="src-newform-pc-pages-form-write-components-FormHanded-index__successIcon">
          </div>
          <span class="title">提交成功</span>
        </div>
        <a-button type="primary" @click="writeAgain">再写一份</a-button>
      </div>
    </form>
  </section>
</template>

<script lang="ts">
import {defineComponent} from 'vue';
import {useRoute, useRouter} from "vue-router";

export default defineComponent({
  name: 'SuccessCom',
  setup() {
    const route = useRoute();
    const router = useRouter();

    const writeAgain = () => {
      router.replace({
        name: 'write',
        query: {
          id: route.query.id ? route.query.id.toString() : ''
        }
      });
    };

    return {
      writeAgain
    }
  }
})
</script>

<style scoped lang="scss">
.form {
  padding-top: 16px;
  width: 100%;
  display: flex;
  justify-content: center;
  min-height: 775px;
  background-color: #f2f4f7;

  .form-container {
    width: 776px;
    min-height: -webkit-calc(100vh - 88px);
    min-height: calc(100vh - 88px);
    background-color: #fff;
    min-height: -webkit-calc(100vh - 88px);
    min-height: calc(100vh - 88px);
    padding: 48px 102px 90px 102px;
    color: #3d4757;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

    .box-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 10%;

      .message {
        display: flex;
        align-items: center;
        margin-bottom: 48px;

        .title {
          margin-left: 1rem;
          font-size: 16px;
          color: #767c85;
        }
      }
    }
  }
}

@media only screen and (max-width: 660px) {
  .header {
    display: none;
  }
  .form-container {
    justify-content: center;
  }
}


</style>
